<template>
  <div class="ddzzt-container">
    <div id="ddzzt" class="ddzzt"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import { cnConvert } from "@/common/js/znConvert.js";
export default {
  data() {
    return {
      resData: [["product"]]
    };
  },
  created() {
    this.getData();
  },
  mounted() {
    // console.log(cnConvert( "废旧放射源回收（收贮）备案",));
  },
  methods: {
    getData() {
      let res = {
        msg: "查询成功",
        result: {
          model: [
            {
              areaCode: "5306",
              areaName: "昭通",
              children: [
                {
                  建设项目环境影响登记表备案: 3457
                }
              ]
            },
            {
              areaCode: "5301",
              areaName: "昆明",
              children: [
                {
                  建设项目环境影响登记表备案: 37250
                }
              ]
            },
            {
              areaCode: "5328",
              areaName: "西双版纳",
              children: [
                {
                  建设项目环境影响登记表备案: 1267
                }
              ]
            },
            {
              areaCode: "5300",
              areaName: "云南",
              children: [
                {
                  放射性同位素转让活动备案: 2
                },
                {
                  放射性同位素异地使用的备案: 1
                },
                {
                  "废旧放射源回收（收贮）备案": 6
                }
              ]
            },
            {
              areaCode: "5323",
              areaName: "楚雄",
              children: [
                {
                  建设项目环境影响登记表备案: 2927
                }
              ]
            },
            {
              areaCode: "5329",
              areaName: "大理",
              children: [
                {
                  建设项目环境影响登记表备案: 3903
                }
              ]
            },
            {
              areaCode: "5309",
              areaName: "临沧",
              children: [
                {
                  建设项目环境影响登记表备案: 3034
                }
              ]
            },
            {
              areaCode: "5334",
              areaName: "迪庆",
              children: [
                {
                  建设项目环境影响登记表备案: 1277
                }
              ]
            },
            {
              areaCode: "5303",
              areaName: "曲靖",
              children: [
                {
                  建设项目环境影响登记表备案: 4183
                }
              ]
            },
            {
              areaCode: "5304",
              areaName: "玉溪",
              children: [
                {
                  建设项目环境影响登记表备案: 2452
                }
              ]
            },
            {
              areaCode: "5326",
              areaName: "文山",
              children: [
                {
                  建设项目环境影响登记表备案: 2843
                }
              ]
            },
            {
              areaCode: "5331",
              areaName: "德宏",
              children: [
                {
                  建设项目环境影响登记表备案: 1747
                }
              ]
            },
            {
              areaCode: "5308",
              areaName: "普洱",
              children: [
                {
                  建设项目环境影响登记表备案: 3507
                }
              ]
            },
            {
              areaCode: "5325",
              areaName: "红河",
              children: [
                {
                  建设项目环境影响登记表备案: 6937
                }
              ]
            },
            {
              areaCode: "5333",
              areaName: "怒江",
              children: [
                {
                  建设项目环境影响登记表备案: 1352
                }
              ]
            },
            {
              areaCode: "5305",
              areaName: "保山",
              children: [
                {
                  建设项目环境影响登记表备案: 2875
                }
              ]
            },
            {
              areaCode: "5307",
              areaName: "丽江",
              children: [
                {
                  建设项目环境影响登记表备案: 1568
                }
              ]
            }
          ],
          taskName: ["建设项目环境影响登记表备案"]
        },
        code: "200"
      };
      let _this = this;
      this.resData[0] = _this.resData[0].concat(res.result.taskName);
      let arr = res.result.model;
      for (let j = 0; j < arr.length; j++) {
        this.resData[j + 1] = [];
        this.resData[j + 1].length = res.result.taskName.length + 1;
        this.resData[j + 1][0] = arr[j].areaName;
        arr[j].children.map(function(value, key) {
          for (var item in value) {
            if (res.result.taskName.indexOf(item) !== -1) {
              _this.resData[j + 1][res.result.taskName.indexOf(item) * 1 + 1] =
                value[item];
            }
          }
        });
      }
      console.log(this.resData);
      setTimeout(()=>{
        this.drawDDZZT(res.result.taskName);
      })
    },
    drawDDZZT(taskName) {
      let colorArr = [
    '#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
    '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
    '#1e90ff', '#ff6347', '#7b68ee', '#d0648a', '#ffd700',
    '#6b8e23', '#4ea397', '#3cb371', '#b8860b', '#7bd9a5'
    ]
      let echartsMap = echarts.init(document.getElementById("ddzzt"));
      echartsMap.setOption({
        backgroundColor: "#091C3D",
        legend: {
          textStyle: {
            color: "#fff"
          }
        },
        grid: {
          top: "5%"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line" //'line' | 'shadow'
          }
        },
        dataset: {
          source: this.resData
        },
        xAxis: {
          type: "category",
          axisLabel: {
            interval: 0,
            rotate: 40,
            textStyle: {
              color: "#1DCDCD"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#1DCDCD",
              width: 2
            }
          }
        },
        yAxis: {
          axisLabel: {
            textStyle: {
              color: "#1DCDCD"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#1DCDCD",
              width: 2
            }
          }
        },
        series: (function() {
          var series = [];
          for (var i = 0; i < taskName.length; i++) {
            var item = {
              type: "bar",
              stack: "type",
              barMaxWidth: "50",
             itemStyle: { color: colorArr[i] } 
            };
            series.push(item);
          }

          return series;
        })()
        // series: [
        //   {
        //     type: "bar",
        //     stack: "type",
        //     barMaxWidth: "50",
        //     itemStyle: { color: "#d16c5a" }
        //   },
        // {
        //   type: "bar",
        //   stack: "type",
        //   barMaxWidth: "50",
        //   itemStyle: { color: "#12fe81" }
        // },
  
        // ]
      });
    }
  }
};
</script>

<style scoped lang="scss">
.ddzzt-container {
  width: 100%;
  height: 100%;

  .ddzzt {
    width: 80%;
    height: 80%;
    margin: 0 auto;
    color: #00a0e9;
    color: #12fe81;
    color: #d16c5a;
  }
}
</style>
